<template>
  <div class="container">
    <div class="header">
      <van-icon size="30" name="arrow-left" @click="goBack" class="header-left"></van-icon>
      填写服务订单
    </div>
    <StatusBar item="0"/>
    <!--服务内容区域-->
    <van-cell>
      <template #title>
        <van-image
            width="40"
            height="40"
            :src="createInfo.service.serviceImg"
        />
      </template>

      <template #default>
        <span class="service-text">{{ createInfo.service.serviceName }}</span>
      </template>
    </van-cell>
    <!--填写区start-->
    <van-cell-group class="cell">
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
          <div @click="showHospital=true">
            {{ form.hospital_name || '选择医院' }}
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>就诊时间</template>
        <template #default>
          <div @click="showTime=true">
            {{ selectTime || '就诊时间' }}
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>陪诊师</template>
        <template #default>
          <div @click="showCompanion=true">
            {{ selectCompanion || '选择陪诊师' }}
            <van-icon name="arrow"/>
          </div>
        </template>
      </van-cell>

      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field
              v-model="form.receiveAddress"
              name="接送地址"
              placeholder="接送地址"
              class="text"
              input-align="right"
              :rules="[{ required: true, message: '请填写接送地址' }]"
          />
        </template>
      </van-cell>

      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field
              v-model="form.tel"
              name="联系电话"
              placeholder="联系电话"
              class="text"
              input-align="right"
              :rules="[{ required: true, message: '请填写联系电话' }]"
          />
        </template>
      </van-cell>
    </van-cell-group>

    <!--服务需求填写区start-->
    <van-cell-group title="服务需求" class="cell">
      <van-field
          class="text"
          style="height: 200%"
          v-model="form.demand"
          placeholder="请简单描述您要就诊的科室"
          :rules="[{ required: true, message: '请填写服务需求' }]"
      />
    </van-cell-group>

    <!--提交按钮-->
    <van-button @click="submitForm" class="sumbit" type="primary" size="large">提交订单</van-button>

    <!-- 医院底部弹出 -->
    <van-popup
        v-model:show="showHospital"
        position="bottom"
        :style="{ height: '40%' }"
    >
      <van-picker
          title="选择医院"
          :columns="showHospitalColumns"
          @confirm="showHospitalConfirm"
          @cancel="showHospital=false"
      />
    </van-popup>

    <!-- 就诊时间底部弹出 -->
    <van-popup
        v-model:show="showTime"
        position="bottom"
        :style="{ height: '40%' }"
    >
      <van-date-picker
          v-model="currentDate"
          title="选择日期"
          :min-date="minDate"
          @confirm="showTimeConfirm"
          @cancel="showTime=false"
      />
    </van-popup>


    <!-- 陪诊师底部弹出 -->
    <van-popup
        v-model:show="showCompanion"
        position="bottom"
        :style="{ height: '40%' }"
    >
      <van-picker
          title="选择陪诊师"
          :columns="showCompanionColumns"
          @confirm="showCompanionConfirm"
          @cancel="showCompanion=false"
      />
    </van-popup>

    <!--二维码自定义弹框-->
    <van-dialog v-model:show="show" :showConfirmButton="false">
      <van-icon name="cross" class="close" @click="closeCode"/>
      <div>微信支付</div>
      <van-image width="150" height="150" :src="qrcodeUrl"/>
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>

  </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
import StatusBar from '../../components/statusBar.vue'
import {computed, getCurrentInstance, onMounted, reactive, ref} from 'vue'
import Qrcode from 'qrcode'
// 获取当前实例
const {proxy} = getCurrentInstance()
const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})
const router = useRouter()
onMounted(async () => {
  const {data} = await proxy.$api.h5Companion();
  console.log('data', data)
  if (data.code === 10000) {
    Object.assign(createInfo, data.data)
  }
  console.log('createInfo', createInfo)
})
const goBack = () => {
  router.go(-1)
}
const form = reactive({
  hospital_id: '',
  hospital_name: '',
  demand: '',
  companion_id: '',
  receiveAddress: '',
  tel: '',
  starttime: ''
})
//计算组装医院弹框数据
const showHospital = ref(false)
const showTime = ref(false)
const showCompanion = ref(false)
const show = ref(false)
const qrcodeUrl = ref('')
const showHospitalColumns = computed(() => {
  return createInfo.hospitals.map(item => {
    return {text: item.name, value: item.id}
  })
})

const showCompanionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return {text: item.name, value: item.id}
  })
})

const selectTime = ref('')
const selectCompanion = ref('')
//选中医院确认
const showHospitalConfirm = (item) => {
  form.hospital_name = item.selectedOptions[0].text
  form.hospital_id = item.selectedOptions[0].value
  //关闭弹出层
  showHospital.value = false
}
//就诊时间定义区
const currentDate = ref(['2021', '01', '01']);
const minDate = ref(new Date())
//选择就诊时间确认
const showTimeConfirm = (item) => {
  const timeStr = item.selectedValues.join('-')
  selectTime.value = timeStr
  form.starttime = new Date(timeStr).getTime()
  showTime.value = false
}

//选择陪诊师确认
const showCompanionConfirm = (item) => {
  form.companion_id = item.selectedOptions[0].value
  selectCompanion.value = item.selectedOptions[0].text
  //关闭弹出层
  showCompanion.value = false
}

//提交订单
const submitForm = async () => {
  const prams = [
    "hospital_id",
    "hospital_name",
    "demand",
    "companion_id",
    "receiveAddress",
    "tel",
    "starttime"
  ]
  for (const i of prams) {
    if (!form[i]) {
      showNotify({message: '请把每一项都填写完'})
      return
    }
  }
  const {data} = await proxy.$api.createOrder(form)
  console.log('submitForm', data)
  if (data.code === 10000) {
    Qrcode.toDataURL(data.data.wx_code).then((url) => {
      //展示二维码弹框
      show.value = true
      qrcodeUrl.value = url
    })
  } else {
    showNotify({message: data.message})
  }

}
//关闭二维码弹窗
const closeCode = () => {
  show.value = false
  router.push('/order')
}
</script>
<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;

  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #e0dddd;

  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }

  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .server-name {
    margin-left: 10px;
  }
}

.service-text {
  background: url() no-repeat center center;
  background-size: 20px;
}

.sumbit {
  position: absolute;
  bottom: 0;
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
